﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Zoomla逐浪CMS z01.com">
<title>入门 &middot; BootstrapVue</title>

<!-- Bootstrap 核心CSS -->
<link href="../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../v4/assets/css/docs.min.css" rel="stylesheet">
 <link href="../style/bv_path.css" rel="stylesheet"> 

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a href="/" aria-label="BootstrapVue" target="_self" class="navbar-brand mr-0 mr-md-2" data-v-38a6c4bd=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 953 953" width="32" height="32" version="1.1" shape-rendering="geometricPrecision" fill-rule="evenodd" clip-rule="evenodd" focusable="false" role="img" class="d-block" data-v-38a6c4bd=""><title data-v-38a6c4bd="">BootstrapVue</title> <path fill="currentColor" d="M92 0h769c50 0 92 42 92 92v769c0 50-42 92-92 92H92c-50 0-92-42-92-92V92C0 42 42 0 92 0zm216 710c100 0 160-50 160-133 0-62-44-107-108-113v-3c48-8 86-52 86-102 0-71-55-117-140-117H111v468h197zM195 307h90c50 0 78 23 78 64 0 44-33 68-91 68h-77V307zm0 338V499h90c64 0 98 25 98 73s-33 73-94 73h-94zm503 65l163-468h-90L652 621h-2L531 242h-92l163 468h96z" data-v-38a6c4bd=""></path></svg></a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link active" href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="http://www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="http://ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="http://v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="http://v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="http://www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
        <a class="dropdown-item" href="vscode.html" target="_blank">vs code技巧</a>        
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome奥森图标</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">

    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active active"><a href="../../../bootstrap-vue/docs/" class="bd-toc-link nuxt-link-exact-active "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/breadcrumb.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/hover" class="nav-link"> Hover <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover" class="nav-link"> Popover </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy" class="nav-link"> Scrollspy </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip" class="nav-link"> Tooltip </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible" class="nav-link"> Visible <small class="badge text-uppercase badge-success">New</small> </a></li>
    </ul>
  </div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#getting-started" class="nav-link font-weight-bold"><span>入门</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#documentation-sections" class="nav-link"><span>文档目录</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#prerequisites" class="nav-link"><span>先决条件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#documentation-information" class="nav-link"><span>文档资料</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#important-html-globals" class="nav-link"><span>全局变量概要</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#html5-doctype" class="nav-link"><span>HTML5 doctype规范</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#responsive-meta-tag" class="nav-link"><span>响应式meta标记</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#css-box-sizing" class="nav-link"><span>CSS box-sizing属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#style-reboot" class="nav-link"><span>样式重置</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#using-module-bundlers" class="nav-link"><span>基于模块化</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#aliasing-vue-import" class="nav-link"><span>在 Vue中灵活引用</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#tree-shaking-with-module-bundlers" class="nav-link"><span>模块捆绑</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#component-groups-and-directives-as-vue-plugins" class="nav-link"><span>以嵌套组件和指令方式作用于vue插件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#individual-components-and-directives" class="nav-link"><span>各个组件和指令</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-bootstrapvue-source-code-for-smaller-bundles" class="nav-link"><span>将BootstrapVue源代码用于较小的捆绑软件</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#nuxtjs-module" class="nav-link"><span>Nuxt.js模块</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#getting-started-with-nuxtjs" class="nav-link"><span>Nuxt.js入门</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-custom-bootstrap-scss" class="nav-link"><span>使用自定义 Bootstrap SCSS</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#transformasseturls-with-nuxtjs" class="nav-link"><span>使用 Nuxt.js 的 transformAssetUrls</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#tree-shaking-with-nuxtjs" class="nav-link"><span>用 Nuxt.js 握手</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#icons" class="nav-link"><span>Icons 图标</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#passing-custom-bootstrapvue-config-with-nuxtjs" class="nav-link"><span>通过 Nuxt.js 传递自定义 BootstrapVue 配置</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#using-pretranspiled-version-of-bootstrapvue-for-nuxtjs" class="nav-link"><span>对 Nuxt.js 使用 BootstrapVue 的预编译版本</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#vue-cli-3" class="nav-link"><span>Vue CLI 3</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#vue-cli-3-plugin" class="nav-link"><span>Vue CLI 3 插件</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#browser" class="nav-link"><span>浏览器</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#build-variants" class="nav-link"><span>构建变量</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#dependencies" class="nav-link"><span>依存关系</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#migrating-a-project-already-using-bootstrap" class="nav-link"><span>已使用 Bootstrap 迁移项目</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#browser-support" class="nav-link"><span>浏览器支持</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#css" class="nav-link"><span>CSS</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#js" class="nav-link"><span>JS</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#tooling-support" class="nav-link"><span>工具支持</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#vs-code--vetur" class="nav-link"><span>VS Code + Vetur</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#jetbrains-webstorm-and-compatible" class="nav-link"><span>JetBrains WebStorm (兼容)</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>  
  
    <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
    <nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
    <ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
    <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="/" class="nuxt-link-active" target="_self">Home</a></li>
    <li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">Docs</span></li>
    </ol>
    </nav>
    <div class="clearfix"></div>
      <h1 class="bd-title" id="content">入门</h1>
      <p class="bd-lead">让我们开始BootstrapVue之旅游，基于全球最流行的Bootstrap V4框架，构建移动优先的响应式门户，在Vue.js前端栈基础上。</p>
      <script type="text/javascript" src="../../v4/assets/js/pupCMS.js"></script>      
      <span>全局版本规范：</span>
      <ul>
        <li><a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a> <code translate="translate" class="notranslate text-nowrap">v2.6</code> 版, 推荐最低为<code translate="translate" class="notranslate text-nowrap">v2.12.01</code> 版。</li>
        <li><a href="http://codd.z01.com/v4" target="_blank" rel="noopener">Bootstrap</a> <code translate="translate" class="notranslate text-nowrap">4.3.1</code> ，其推荐的版本是<code translate="translate" class="notranslate text-nowrap">v4.4.1</code>版。</li>
        <li> <a href="../../../bootstrap-vue/docs/components/toast" class="font-weight-bold">Toasts</a>发布的<a href="https://portal-vue.linusb.org/" target="_blank" rel="noopener">PortalVue</a> <code translate="translate" class="notranslate text-nowrap">v2.1</code> ,推荐最新是 <code translate="translate" class="notranslate text-nowrap">v2.1.7</code> 版。</li>
        <li><a href="https://jquery.com/" target="_blank" rel="noopener">jQuery</a> 则 <strong>不是必须的</strong>（BootstrapVue不依赖Jquery)。 </li>
        </ul>
        <p>点此查看 <a href="https://bootstrap-vue.org/docs/reference/changelog" class="font-weight-bold">BootstrapVue v2.12.0新增功能</a>.</p>
        <p>从 <code translate="translate" class="notranslate text-nowrap">v2.0.0-rc.##</code> 迁移，则请浏览
<a href="../../../bootstrap-vue/docs/misc/changelog#v200" class="font-weight-bold"><code translate="translate" class="notranslate text-nowrap">v2.0.0迁移指南</code> </a>。</p>
      <h2 id="documentation-sections" class="bv-no-focus-ring"><span class="bd-content-title">文档目录<a href="#documentation-sections" aria-labelledby="documentation-sections" class="anchorjs-link"></a></span></h2>
        <p>本文档目录:</p>
        <ul>
        <li><a href="../../../bootstrap-vue/docs/components" class="font-weight-bold">组件 Components</a> - 组件和插件文档</li>
        <li><a href="../../../bootstrap-vue/docs/directives" class="font-weight-bold">指令 Directives</a> - 指令和指令插件文档</li>
        <li><a href="../../../bootstrap-vue/docs/icons.html" class="font-weight-bold">图标 Icons</a> - Icons图标手册 <span class="badge badge-secondary">v2.2.0+</span></li>
        <li><a href="../../../bootstrap-vue/docs/misc" class="font-weight-bold">杂项 Miscellaneous</a> - 扩展信息</li>
        <li><a href="https://bootstrap-vue.org/play" class="font-weight-bold" target="_blank">体验 Playground</a> - 在线体验例子</li>
        </ul>
      
        <h2 id="prerequisites" class="bv-no-focus-ring"><span class="bd-content-title">先决条件<a href="#prerequisites" aria-labelledby="prerequisites" class="anchorjs-link"></a></span></h2>
        <p>使用 BootstrapVue前，建议你先熟悉Vue.JS的功能 和Bootstrap V4 Css框架，如果你还不熟悉它们，可以点下面的链接入手学习：</p>
        <ul>
        <li><a href="https://cn.vuejs.org/v2/guide/" target="_blank" rel="noopener">Vue js使用指南</a></li>
        <li><a href="https://cn.vuejs.org/v2/api/" target="_blank" rel="noopener">Vue API</a></li>
        <li><a href="https://code.z01.com/v4/" target="_blank" rel="noopener">Bootstrap v4.4 中文手册</a></li>
        <li><a href="https://vue-loader.vuejs.org/zh/guide/scoped-css.html" target="_blank" rel="noopener">Vue loader scoped CSS</a>, 如果使用scoped
        styles组件 (单组件) <code translate="translate" class="notranslate text-nowrap">.vue</code> 文件规范</li>
        </ul>
        <h2 id="documentation-information" class="bv-no-focus-ring"><span class="bd-content-title">文档资料<a href="#documentation-information" aria-labelledby="documentation-information" class="anchorjs-link"></a></span></h2>
        <p>BootstrapVue的很多使用文档中，会用到 <code class="text-nowrap">ml-2</code>、 <code class="text-nowrap">py-1</code>,等Class类名，这些都是Bootstrap v4.4 通用样式类名，用于定义前端的填充、边距、定位等，可在<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">实用 Class样式类表</a> 浏览作为参考。</p>
        <p>本文档许多例子是可以 <em>实时运行作为测试的</em> ，以方便读者现场运行体验，提升学习成果（注意： <code translate="translate" class="notranslate text-nowrap">&lt;template&gt;</code> 节点由于使用了JavaScript ES6规范，所以部份示例无法在IE11中使用)。</p>
        <p>BootstrapVue 还提供了一个 <a href="/play" class="font-weight-bold">交互式的在线代码运行调试器</a>，你可以在这里尝试各种组件，并将结果导出到JSFiddle、 CodePen、CodeSandbox等平台。</p>
        <h2 id="important-html-globals" class="bv-no-focus-ring"><span class="bd-content-title">全局变量概要<a href="#important-html-globals" aria-labelledby="important-html-globals" class="anchorjs-link"></a></span></h2>
        <p>为了满足跨浏览器支持和最大化符合HTML5规范以及w3c标准，Bootstrap v4 CSS使用了一系列重要的全局样式和设置，使用时需要注意，下面各小节将详细讲述。</p>
        <h3 id="html5-doctype" class="bv-no-focus-ring"><span class="bd-content-title">HTML5 doctype规范<a href="#html5-doctype" aria-labelledby="html5-doctype" class="anchorjs-link"></a></span></h3>
        <p>Bootstrap 是基于 <code translate="translate" class="notranslate text-nowrap">HTML5</code> 规范的，u <em>脱离</em> 它则不能获得完整有效的样式呈与功能呈现，并带来不可预期的困扰，下面是一个标准的HTML5网页头部规范（译者将原英文头部lang标签改为中文，以符合中文读者）：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
  <span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-CN"</span>&gt;</span>
            ...
          <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
  </code></pre></figure>
        <h3 id="responsive-meta-tag" class="bv-no-focus-ring"><span class="bd-content-title">响应式meta标记<a href="#responsive-meta-tag" aria-labelledby="responsive-meta-tag" class="anchorjs-link"></a></span></h3>
        <p>Bootstrap 强调移动优先策略，所以需要针对设备进行meta头部定义，并支持CSS媒体查询，为了保证所有设备都能正确渲染、满足移动触屏幕的缩放要求，请在<strong>网页头部</strong>  <code translate="translate" class="notranslate text-nowrap">&lt;head&gt;</code>区增加相关定义，如下所示：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1, shrink-to-fit=no"</span>&gt;</span>
  </code></pre></figure>
        <h3 id="css-box-sizing" class="bv-no-focus-ring"><span class="bd-content-title">CSS box-sizing属性<a href="#css-box-sizing" aria-labelledby="css-box-sizing" class="anchorjs-link"></a></span></h3>
        <p>为了支持在CSS中能调整大小，我们将<code translate="translate" class="notranslate text-nowrap">box-sizing</code> 中的 <code translate="translate" class="notranslate text-nowrap">content-box</code> 属性替换为 <code translate="translate" class="notranslate text-nowrap">border-box</code>，这样可以确保填充<code translate="translate" class="notranslate text-nowrap">padding</code>不会影响到元素的最终宽度计算，但会导致某些第三方软件（如 Google Maps 、 Google Custom Search
        Engine）出现问题。</p>
        <p>少数情况下你需要覆盖它，请使用下面的CSS指导操作：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
  <span class="hljs-selector-class">.selector-for-some-widget</span> {
            <span class="hljs-attribute">box-sizing</span>: content-box;
          }
  </code></pre></figure>
        <p>使用上面的代码版断，嵌套元素，（包括通过 <code translate="translate" class="notranslate text-nowrap">::before</code> 、 <code translate="translate" class="notranslate text-nowrap">::after</code> —
        都能接受继承，从而指定<code translate="translate" class="notranslate text-nowrap">box-sizing</code> 元素在 <code translate="translate" class="notranslate text-nowrap">.selector-for-some-widget</code>类上的表现。</p>
        <p>你可以通过css-tricks网站查看<a href="https://css-tricks.com/box-sizing/" target="_blank" rel="noopener">box model and sizing属性知识</a>。</p>
        <h3 id="style-reboot" class="bv-no-focus-ring"><span class="bd-content-title">样式重置<a href="#style-reboot" aria-labelledby="style-reboot" class="anchorjs-link"></a></span></h3>
        <p>为改善和统一在各个浏览中的表现， Bootstrap v4.4 使用 <a href="https://getbootstrap.com/docs/4.3/content/reboot/" target="_blank" rel="noopener">Reboot样式重置（即根元素重置）</a> 来纠正各个浏览器和设备间的差异，同时为常见的<abbr title="Hyper Text markup Language">HTML</abbr> 元素提供更多的私有扩展和重置规范。</p>
        <h2 id="using-module-bundlers" class="bv-no-focus-ring"><span class="bd-content-title">基于模块化<a href="#using-module-bundlers" aria-labelledby="using-module-bundlers" class="anchorjs-link"></a></span></h2>
        <p>你可以使用<a href="https://webpack.js.org/" target="_blank" rel="noopener">Webpack</a>、 <a href="https://parceljs.org/" target="_blank" rel="noopener">Parcel</a> 、 <a href="https://rollupjs.org/" target="_blank" rel="noopener">rollup.js</a>等方法引入到项目中，通过<code translate="translate" class="notranslate text-nowrap">yarn</code> 或者 <code translate="translate" class="notranslate text-nowrap">npm</code> 来获取安装Vue.js、 BootstrapVue 和 Bootstrap v4:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment"># With npm</span>
npm install vue bootstrap-vue bootstrap

<span class="hljs-comment"># With yarn</span>
yarn add vue bootstrap-vue bootstrap</pre>
</code></pre></figure>

        <p>然后在你的应用程序入口点注BootstrapVue：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment">// app.js</span>
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> { BootstrapVue, IconsPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>

<span class="hljs-comment">// Install BootstrapVue</span>
Vue.use(BootstrapVue)
<span class="hljs-comment">// Optionally install the BootstrapVue icon components plugin</span>
Vue.use(IconsPlugin)
</code></pre></figure>

<p>然后引入 Bootstrap 和BootstrapVue的<code translate="translate" class="notranslate text-nowrap">css</code> 文件：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment">// app.js</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'bootstrap/dist/css/bootstrap.css'</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'bootstrap-vue/dist/bootstrap-vue.css'</span>
</code></pre></figure>

<p>或者引入 Bootstrap 和 BootstrapVue的 <code translate="translate" class="notranslate text-nowrap">scss</code> 文件用于驱动SCSS混合:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment">// custom.scss</span>
<span class="hljs-keyword">@import</span> <span class="hljs-string">'node_modules/bootstrap/scss/bootstrap'</span>;
<span class="hljs-keyword">@import</span> <span class="hljs-string">'node_modules/bootstrap-vue/src/index.scss'</span>;
</code></pre></figure>

<p>最后在程序的入口文件引入 <code translate="translate" class="notranslate text-nowrap">custom.scss</code>：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment">// app.js</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'./custom.scss'</span>
</code></pre></figure>
          
<p>在包含之前，请务必使用 <code translate="translate" class="notranslate text-nowrap">@import</code> 定义你的变量值，同时包含 Bootstrap SCSS
(<code translate="translate" class="notranslate text-nowrap">bootstrap.scss</code>)、BootstrapVue SCSS (<code translate="translate" class="notranslate text-nowrap">bootstrap-vue.scss</code>) 以确保正确的变量。</p>
<p>将所有的SCSS <code translate="translate" class="notranslate text-nowrap">@import</code>在一个SCSS 文件中，然后将该单文件引入（这是scss的基本方法，默认情况下，单个SCSSS导入项目，不会在文件之间共享变量和函数（从而避免变量与函数冲突）。</p>
<p>当从scss文件导入时，Webpack和Parcel支持在scss模块前面加上波浪号（〜）：</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment">// Webpack example</span>
<span class="hljs-keyword">@import</span> <span class="hljs-string">'~bootstrap'</span>;
<span class="hljs-keyword">@import</span> <span class="hljs-string">'~bootstrap-vue'</span>;
</code></pre></figure>

<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-comment">// Parcel example</span>
<span class="hljs-keyword">@import</span> <span class="hljs-string">'~bootstrap/scss/bootstrap'</span>;
<span class="hljs-keyword">@import</span> <span class="hljs-string">'~bootstrap-vue/src/index.scss'</span>;
</code></pre></figure>

<p>有关如何配置装载以及如何解决模块的更多详细信息，敬请查阅下方模块捆绑文档：</p>
<ul>
<li>Webpack configuration to load CSS files
(<a href="https://webpack.js.org/guides/asset-management/#loading-css" target="_blank" rel="noopener">官方指南</a>)</li>
<li>Webpack Loader for SASS/SCSS files (<a href="https://webpack.js.org/loaders/sass-loader/" target="_blank" rel="noopener">官方指南</a>)</li>
<li>Parcel CSS (<a href="https://parceljs.org/css.html" target="_blank" rel="noopener">官方指南</a>)</li>
<li>Parcel SCSS (<a href="https://parceljs.org/scss.html" target="_blank" rel="noopener">官方指南</a>)</li>
</ul>
<p>有关BoostrapVue主题引导程序的信息，请查看<a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">主题参考</a> 部分。</p>

        <h3 id="aliasing-vue-import" class="bv-no-focus-ring"><span class="bd-content-title">在 Vue中灵活引用<a href="#aliasing-vue-import" aria-labelledby="aliasing-vue-import" class="anchorjs-link"></a></span></h3>
        <p>BootstrapVue 和 PortalVue 需要访问 <code translate="translate" class="notranslate text-nowrap">Vue</code> 全局类实现引用 (通过 <code translate="translate" class="notranslate text-nowrap">import Vue from 'vue'</code>来实现)。</p>
        <div class="alert alert-info mb-3">
        <p class="mb-0"> 
          如果您使用的是特定版本的Vue（例如，仅运行时与VS编译器运行），则需要在捆绑程序配置中为“ vue”设置别名，以确保您的项目，BootstrapVue和PortalVue都在使用 相同版本的Vue。 如果看到<code translate="translate" class="notranslate">"$attr and $listeners is readonly"</code>、 <code translate="translate" class="notranslate">"Multiple instances of Vue detected"</code>等错误时，您则需要设置一个别名。</p>
        </div>
        <p><strong>例子: Vue 在 webpack.config.js中的别名处置</strong></p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">
<span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-comment">// ...</span>
          <span class="hljs-attr">resolve</span>: {
            <span class="hljs-attr">alias</span>: {
              <span class="hljs-comment">// If using the runtime only build</span>
              <span class="hljs-attr">vue$</span>: <span class="hljs-string">'vue/dist/vue.runtime.esm.js'</span> <span class="hljs-comment">// 'vue/dist/vue.runtime.common.js' for webpack 1</span>
              <span class="hljs-comment">// Or if using full build of Vue (runtime + compiler)</span>
              <span class="hljs-comment">// vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1</span>
            }
          }
        }
</code></pre></figure>

<p><strong>提示:</strong> 如果您的项目具有多个webpack配置文件 (例如 <code translate="translate" class="notranslate text-nowrap">webpack.config.js</code>、 <code translate="translate" class="notranslate text-nowrap">webpack.renderer.config.js</code>、<code translate="translate" class="notranslate text-nowrap">webpack.vendor.config.js</code>、 <code translate="translate" class="notranslate text-nowrap">webpack.server.config.js</code>、 <code translate="translate" class="notranslate text-nowrap">webpack.client.config.js</code>等等)，则需要在这些配置中中设置适当的别名。</p>
<p>点击浏览 <a href="https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时" target="_blank" rel="noopener">Vue.js</a> 中关于 <a href="https://webpack.js.org/" target="_blank" rel="noopener">webpack</a>、<a href="https://rollupjs.org/" target="_blank" rel="noopener">rollup.js</a>、<a href="https://parceljs.org/" target="_blank" rel="noopener">Parcel</a>等配置的详细文档。</p>
        
<h2 id="tree-shaking-with-module-bundlers" class="bv-no-focus-ring"><span class="bd-content-title">模块捆绑<a href="#tree-shaking-with-module-bundlers" aria-labelledby="tree-shaking-with-module-bundlers" class="anchorjs-link"></a></span></h2>
<p>使用模块捆绑时，可以选择仅导入特定的组件（插件）、指令，注意这仅迁于JavaScript代码，不适用于CSS/SCSS.</p>
<div class="alert alert-info">
<p class="mb-0"><b>提示:</b> 仅当 webpack 4 在 <a href="https://webpack.js.org/guides/tree-shaking"><code translate="translate" class="notranslate">production</code></a> 模式并助启用了最小化设置，才有效。 </p>
</div>

        <h3 id="component-groups-and-directives-as-vue-plugins" class="bv-no-focus-ring"><span class="bd-content-title">以嵌套组件和指令方式作用于vue插件<a href="#component-groups-and-directives-as-vue-plugins" aria-labelledby="component-groups-and-directives-as-vue-plugins" class="anchorjs-link"></a></span></h3>
        <p>Y您可以通过从导入将组件组和指令作为Vue插件导入 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue</code>:</p>
<pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-comment">// This imports all the layout components such as &lt;b-container&gt;, &lt;b-row&gt;, &lt;b-col&gt;:</span>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="hljs-keyword">import</span> { LayoutPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(LayoutPlugin)

<span class="hljs-comment">// This imports &lt;b-modal&gt; as well as the v-b-modal directive as a plugin:</span>
<span class="hljs-keyword">import</span> { ModalPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(ModalPlugin)

<span class="hljs-comment">// This imports &lt;b-card&gt; along with all the &lt;b-card-*&gt; sub-components as a plugin:</span>
<span class="hljs-keyword">import</span> { CardPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(CardPlugin)

<span class="hljs-comment">// This imports directive v-b-scrollspy as a plugin:</span>
<span class="hljs-keyword">import</span> { VBScrollspyPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(VBScrollspyPlugin)

<span class="hljs-comment">// This imports the dropdown and table plugins</span>
<span class="hljs-keyword">import</span> { DropdownPlugin, TablePlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)</pre>
<p>When importing as plugins, all subcomponents and related directives are imported in most cases. i.e.
When importing <code translate="translate" class="notranslate text-nowrap">&lt;b-nav&gt;</code>, all the <code translate="translate" class="notranslate text-nowrap">&lt;nav-*&gt;</code> sub components are also included, as well all dropdown
sub components. Component shorthand aliases (if any) are also included in the plugin. Refer to the
component and directive documentation for details.</p>
<p>There are two additional helper plugins for providing the <code translate="translate" class="notranslate text-nowrap">$bvModal</code> and <code translate="translate" class="notranslate text-nowrap">$bvToast</code> injections (if
you are not using the <code translate="translate" class="notranslate text-nowrap">ModalPlugin</code> or <code translate="translate" class="notranslate text-nowrap">ToastPlugin</code> plugins) which are available for import from <code translate="translate" class="notranslate text-nowrap">'bootstrap-vue'</code>:</p>
<ul>
<li><code translate="translate" class="notranslate text-nowrap">BVModalPlugin</code> - provides the injection <code translate="translate" class="notranslate text-nowrap">$bvModal</code> for generating <a href="../../../bootstrap-vue/docs/components/modal#modal-message-boxes" class="font-weight-bold">message boxes</a>.</li>
<li><code translate="translate" class="notranslate text-nowrap">BVToastPlugin</code> - provides the injection <code translate="translate" class="notranslate text-nowrap">$bvToast</code> for generating <a href="../../../bootstrap-vue/docs/components/toast#toasts-on-demand" class="font-weight-bold">on demand toasts</a>.</li>
</ul>
<p>When importing multiple component group and/or directive group plugins, include all imports in a
single <code translate="translate" class="notranslate text-nowrap">import</code> statement for optimal tree shaking.</p>
</code></pre></figure>        
        
        
        <h3 id="individual-components-and-directives" class="bv-no-focus-ring"><span class="bd-content-title">各个组件和指令<a href="#individual-components-and-directives" aria-labelledby="individual-components-and-directives" class="anchorjs-link"></a></span></h3>
        <p>如果您只想引入一个特定的组件或一组组件，则可以通过直接导入这些组件来实现。</p>
        <p>要挑选一个组件/指令，请先将其导入使用文件中：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-comment">// Place all imports from 'bootstrap-vue' in a single import</span>
        <span class="hljs-comment">// statement for optimal bundle sizes</span>
        <span class="hljs-keyword">import</span> { BModal, VBModal } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span></pre>
        <p>然后将其添加到您的组件定义中：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate">Vue.component(<span class="hljs-string">'my-component'</span>, {
          <span class="hljs-attr">components</span>: {
            <span class="hljs-string">'b-modal'</span>: BModal
          },
          <span class="hljs-attr">directives</span>: {
            <span class="hljs-comment">// Note that Vue automatically prefixes directive names with `v-`</span>
            <span class="hljs-string">'b-modal'</span>: VBModal
          }
          <span class="hljs-comment">// ...</span>
        })</pre>
        <p>或在全局注册:</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate">Vue.component(<span class="hljs-string">'b-modal'</span>, BModal)
        <span class="hljs-comment">// Note that Vue automatically prefixes directive names with `v-`</span>
        Vue.directive(<span class="hljs-string">'b-modal'</span>, VBModal)</pre>
        <p>Vue在这里允许使用各种组件和指令名称语法，因此可以随意使用 <samp translate="translate" class="notranslate">kebab-casing</samp>（如图所示），<samp translate="translate" class="notranslate">camelCasing</samp>，<samp translate="translate" class="notranslate">PascalCasing</samp> 和/或 object 属性速记（仅限组件）。</p>
        <h3 id="using-bootstrapvue-source-code-for-smaller-bundles" class="bv-no-focus-ring"><span class="bd-content-title">将BootstrapVue源代码用于较小的捆绑软件<a href="#using-bootstrapvue-source-code-for-smaller-bundles" aria-labelledby="using-bootstrapvue-source-code-for-smaller-bundles" class="anchorjs-link"></a></span></h3>
        <p>使用模块捆绑程序时，它们通常将默认使用 <code translate="translate" class="notranslate text-nowrap">esm/</code> 模块化构建，该构建已由 Babel 预编译为  <a href="https://github.com/bootstrap-vue/bootstrap-vue/blob/master/.browserslistrc" target="_blank" rel="noopener">supported browsers</a> (支持的浏览器) 。</p>
        <p>您可以通过别名化<code translate="translate" class="notranslate text-nowrap">'bootstrap-vue'</code>以使用 BootstrapVue 源文件来覆盖 <code translate="translate" class="notranslate text-nowrap">esm/</code> build 的使用，并在模块捆绑程序配置中将 <code translate="translate" class="notranslate text-nowrap">node_modules/bootstrap-vue/src/*</code> 列入白名单以在构建过程中进行编译。 允许您为目标浏览器/环境转换BootstrapVue，并可能减小捆绑包的大小（并且仅包含babel helper utils一次），但会花费更长的构建时间。</p>
        <p><strong>用于 Babel 移植的示例 webpack.config.js：</strong></p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">resolve</span>: {
            <span class="hljs-attr">alias</span>: {
              <span class="hljs-comment">// Alias for using source of BootstrapVue</span>
              <span class="hljs-string">'bootstrap-vue$'</span>: <span class="hljs-string">'bootstrap-vue/src/index.js'</span>
            }
          },
          <span class="hljs-attr">module</span>: {
            <span class="hljs-attr">rules</span>: [
              {
                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,
                <span class="hljs-comment">// Exclude transpiling `node_modules`, except `bootstrap-vue/src`</span>
                <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/node_modules\/(?!bootstrap-vue\/src\/)/</span>,
                <span class="hljs-attr">use</span>: {
                  <span class="hljs-attr">loader</span>: <span class="hljs-string">'babel-loader'</span>,
                  <span class="hljs-attr">options</span>: {
                    <span class="hljs-attr">presets</span>: [<span class="hljs-string">'env'</span>]
                  }
                }
              }
            ]
          }
        }</pre>
        <p>您可能需要安装 <code translate="translate" class="notranslate text-nowrap">babel-core</code>, <code translate="translate" class="notranslate text-nowrap">babel-loader</code> ,和 <code translate="translate" class="notranslate text-nowrap">babel-preset-env</code>:</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate"><span class="hljs-comment"># If using npm</span>
        npm install babel-core babel-loader babel-preset-env --save-dev

        <span class="hljs-comment"># If using yarn</span>
        yarn add babel-core babel-loader babel-preset-env --dev</pre>
        <p>有关更多详细信息，请参见：</p>
        <ul>
        <li><a href="https://webpack.js.org/configuration/resolve/" target="_blank" rel="noopener">Webpack <code translate="translate" class="notranslate text-nowrap">resolve.alias</code></a></li>
        <li><a href="https://webpack.js.org/configuration/module/#rule" target="_blank" rel="noopener">Webpack <code translate="translate" class="notranslate text-nowrap">rule</code></a></li>
        <li><a href="https://rollupjs.org/" target="_blank" rel="noopener">rollup.js</a></li>
        <li><a href="https://parceljs.org/" target="_blank" rel="noopener">Parcel</a></li>
        </ul>
        <h2 id="nuxtjs-module" class="bv-no-focus-ring"><span class="bd-content-title">Nuxt.js模块<a href="#nuxtjs-module" aria-labelledby="nuxtjs-module" class="anchorjs-link"></a></span></h2>
        <p>BootstrapVue 提供了一个 Nuxt.js 模块，可以轻松地将 BootstrapVue（或BootstrapVue的一部分）导入到Nuxt.js应用程序中。</p>
        <h3 id="getting-started-with-nuxtjs" class="bv-no-focus-ring"><span class="bd-content-title">Nuxt.js入门<a href="#getting-started-with-nuxtjs" aria-labelledby="getting-started-with-nuxtjs" class="anchorjs-link"></a></span></h3>
        <p>建议使用 <a href="https://nuxtjs.org/" target="_blank" rel="noopener">Nuxt.js</a> <code translate="translate" class="notranslate">2.11.0</code> 版（或更高版本）</p>
        <p>安装依赖:</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate"><span class="hljs-comment"># With npm</span>
        npm install bootstrap-vue

        <span class="hljs-comment"># With yarn</span>
        yarn add bootstrap-vue</pre>
        <p>将 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue/nuxt</code> 添加到 <strong><code translate="translate" class="notranslate text-nowrap">nuxt.config.js</code></strong> 文件的 modules 部分。</p>
        <p>这将包括 <code translate="translate" class="notranslate text-nowrap">bootstrap.css</code> 和 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue.css</code> 默认的预编译CSS。</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>]
        }</pre>
        <p>请注意，这 <strong>不会</strong> 安装 Icons 组件。要查看如何通过 Nuxt.js 模块包括图标，请参阅下面的 <a href="#icons" class="font-weight-bold">Icons section</a> 部分。</p>
        <h3 id="using-custom-bootstrap-scss" class="bv-no-focus-ring"><span class="bd-content-title">使用自定义 Bootstrap SCSS<a href="#using-custom-bootstrap-scss" aria-labelledby="using-custom-bootstrap-scss" class="anchorjs-link"></a></span></h3>
        <p>如果使用自定义的 Bootstrap SCSS，则可以通过将以下选项设置为 <code translate="translate" class="notranslate text-nowrap">false</code> 来禁用自动包含 Bootstrap 和 BootstrapVue 预编译的CSS文件。</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-attr">bootstrapCSS</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Or `css: false`</span>
            <span class="hljs-attr">bootstrapVueCSS</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// Or `bvCSS: false`</span>
          }
        }</pre>
        <p>BootstrapVue 的自定义 SCSS 依赖于 Bootstrap SCSS 变量和 mixins，以及您可能设置的任何变量覆盖。您可以在项目的自定义 SCSS 文件中包括 Bootstrap 和 BootstrapVue SCSS：</p>
        <pre translate="translate" class="hljs scss text-monospace p-2 notranslate"><span class="hljs-comment">// custom.scss</span>

        <span class="hljs-comment">// Custom Bootstrap variable overrides go first</span>
        <span class="hljs-variable">$grid-breakpoints</span>: (
          xs: <span class="hljs-number">0</span>,
          sm: <span class="hljs-number">480px</span>,
          md: <span class="hljs-number">640px</span>,
          lg: <span class="hljs-number">992px</span>,
          xl: <span class="hljs-number">1300px</span>
        );
        <span class="hljs-variable">$enable-rounded</span>: false;

        <span class="hljs-comment">// Then include the following</span>
        <span class="hljs-keyword">@import</span> <span class="hljs-string">'bootstrap/scss/bootstrap.scss'</span>;
        <span class="hljs-keyword">@import</span> <span class="hljs-string">'bootstrap-vue/src/index.scss'</span>;

        <span class="hljs-comment">// And define any of your custom or additional CSS/SCSS here,</span>
        <span class="hljs-comment">// or via an @import</span></pre>
        <p>在应用程序的主入口中，包括 <em>单个</em> 自定义SCSS文件（使用 <code translate="translate" class="notranslate text-nowrap">sass-loader</code> 时）：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-comment">// app.js</span>
        <span class="hljs-keyword">import</span> <span class="hljs-string">'custom.scss'</span></pre>
        <h3 id="transformasseturls-with-nuxtjs" class="bv-no-focus-ring"> 使用 Nuxt.js 的 <span class="bd-content-title"><code translate="translate" class="notranslate text-nowrap">transformAssetUrls</code> <a href="#transformasseturls-with-nuxtjs" aria-labelledby="transformasseturls-with-nuxtjs" class="anchorjs-link"></a></span></h3>
        <p>BootstrapVue Nuxt 插件模块将为您自动添加特定于 BootstrapVue 的 <a href="../../../bootstrap-vue/docs/reference/images" class="font-weight-bold"><code translate="translate" class="notranslate text-nowrap">transformAssetUrls</code></a> 图像 <code translate="translate" class="notranslate text-nowrap">src</code> 属性配置。  image  prop configuration for you.</p>
        <h3 id="tree-shaking-with-nuxtjs" class="bv-no-focus-ring"><span class="bd-content-title">用 Nuxt.js 握手<a href="#tree-shaking-with-nuxtjs" aria-labelledby="tree-shaking-with-nuxtjs" class="anchorjs-link"></a></span></h3>
        <p>如果由于只使用可用的 BootstrapVue 插件的一部分而希望减小生产包的大小，则可以配置要全局安装在 Nuxt.js 项目中的 BootstrapVue <code translate="translate" class="notranslate text-nowrap">componentPlugins</code> 或 <code translate="translate" class="notranslate text-nowrap">directivePlugins</code> 的列表。JavaScript 代码，而不是 CSS / SCSS。</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-attr">componentPlugins</span>: [
              <span class="hljs-string">'LayoutPlugin'</span>,
              <span class="hljs-string">'FormPlugin'</span>,
              <span class="hljs-string">'FormCheckboxPlugin'</span>,
              <span class="hljs-string">'FormInputPlugin'</span>,
              <span class="hljs-string">'FormRadioPlugin'</span>,
              <span class="hljs-string">'ToastPlugin'</span>,
              <span class="hljs-string">'ModalPlugin'</span>
            ],
            <span class="hljs-attr">directivePlugins</span>: [<span class="hljs-string">'VBPopoverPlugin'</span>, <span class="hljs-string">'VBTooltipPlugin'</span>, <span class="hljs-string">'VBScrollspyPlugin'</span>]
          }
        }</pre>
        <p>在 <code translate="translate" class="notranslate text-nowrap">componentPlugins</code> 选项中提供了两个附加的帮助程序插件，用于提供 <code translate="translate" class="notranslate text-nowrap">$bvModal</code> 和 <code translate="translate" class="notranslate text-nowrap">$bvToast</code> 注入（如果您未使用 <code translate="translate" class="notranslate text-nowrap">ModalPlugin</code> 或 <code translate="translate" class="notranslate text-nowrap">ToastPlugin</code> 插件）：</p>
        <ul>
        <li><code translate="translate" class="notranslate text-nowrap">BVModalPlugin</code> - 提供注入 <code translate="translate" class="notranslate text-nowrap">$bvModal</code> 以生成 <a href="../../../bootstrap-vue/docs/components/modal#modal-message-boxes" class="font-weight-bold">message boxes</a>【消息框】。</li>
        <li><code translate="translate" class="notranslate text-nowrap">BVToastPlugin</code> - 提供注入 <code translate="translate" class="notranslate text-nowrap">$bvToast</code> 以生成 <a href="../../../bootstrap-vue/docs/components/toast#toasts-on-demand" class="font-weight-bold">on demand toasts</a>【按需吐司】。</li>
        </ul>
        <p>您还可以通过配置要全局安装在 Nuxt.js 项目中的 BootstrapVue 组件或指令的列表，有选择地导入单个 <code translate="translate" class="notranslate text-nowrap">components</code>【组件】和/或 <code translate="translate" class="notranslate text-nowrap">directives</code>【指令】。</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-attr">components</span>: [<span class="hljs-string">'BContainer'</span>, <span class="hljs-string">'BRow'</span>, <span class="hljs-string">'BCol'</span>, <span class="hljs-string">'BFormInput'</span>, <span class="hljs-string">'BButton'</span>, <span class="hljs-string">'BTable'</span>, <span class="hljs-string">'BModal'</span>],
            <span class="hljs-attr">directives</span>: [<span class="hljs-string">'VBModal'</span>, <span class="hljs-string">'VBPopover'</span>, <span class="hljs-string">'VBTooltip'</span>, <span class="hljs-string">'VBScrollspy'</span>]
          }
        }</pre>
        <p>随意将插件导入与单个组件和指令导入混合和匹配。</p>
        <p>请参阅每个 <a href="../../../bootstrap-vue/docs/components" class="font-weight-bold">component</a>【组件】和 <a href="../../../bootstrap-vue/docs/directives" class="font-weight-bold">directive</a>【指令】文档底部的参考部分，以获取有关可用插件名称（以及每个插件中包含哪些组件和指令）以及组件和/或指令导入名称的详细信息。</p>
        <p>请注意，导入单个组件时，任何组件别名都将 <strong>不可用</strong>。</p>
        <div class="alert alert-info">
        <p class="mb-0"><b>注意：</b>只有当您的Nuxt.js应用程序处于 <code translate="translate" class="notranslate">production</code>【生产】模式时，最佳摇晃树才能发挥作用。在 <code translate="translate" class="notranslate">not in production</code> 非生产模式（即 <code translate="translate" class="notranslate">dev</code>【开发】模式）下，您可能会注意到捆绑包尺寸更大。</p>
        </div>
        <p>如果要将单个 BootstrapVue 组件导入到 <em>特定</em> 页面 和/或 Nuxt 应用程序的组件中，则可能要绕过 Nuxt.js 模块，而是遵循上述 <a href="#using-module-bundlers" class="font-weight-bold">module bundlers</a> 【模块捆绑器】和 <a href="#tree-shaking-with-module-bundlers" class="font-weight-bold">Tree shaking with module bundlers</a>【用模块捆绑器一起进行的握手】。
        另外，您可能只想在 Nuxt.js 模块配置中导入一些插件（例如 <code translate="translate" class="notranslate text-nowrap">LayoutPlugin</code> ），然后在需要的页面中导入其他组件或插件。</p>
        <h3 id="icons" class="bv-no-focus-ring"><span class="bd-content-title">Icons 图标<a href="#icons" aria-labelledby="icons" class="anchorjs-link"></a></span></h3>
        <p>使用 Nuxt.js 模块时，<a href="../../../bootstrap-vue/docs/icons" class="font-weight-bold">icons 插件</a> <strong>不会</strong> 自动安装。您必须显式启用 <code translate="translate" class="notranslate text-nowrap">IconsPlugin</code> 或指定要导入的图标组件。</p>
        <p>所有 icons 图标：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-attr">icons</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// Install the IconsPlugin (in addition to BootStrapVue plugin</span>
          }
        }</pre>
        <p>具体 icons 图标：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-comment">// Add the desired icon components to the `components` array</span>
            <span class="hljs-attr">components</span>: [<span class="hljs-string">'BIcon'</span>, <span class="hljs-string">'BIconAlertFill'</span>, <span class="hljs-string">'BIconCalendar'</span>, <span class="hljs-string">'BIconGears'</span>]
          }
        }</pre>
        <p>Icons 图标插件：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-comment">// Add the icon plugin to the `componentsPlugins` array</span>
            <span class="hljs-attr">componentPlugins</span>: [<span class="hljs-string">'IconsPlugin'</span>]
          }
        }</pre>
        <h3 id="passing-custom-bootstrapvue-config-with-nuxtjs" class="bv-no-focus-ring"><span class="bd-content-title">通过 Nuxt.js 传递自定义 BootstrapVue 配置<a href="#passing-custom-bootstrapvue-config-with-nuxtjs" aria-labelledby="passing-custom-bootstrapvue-config-with-nuxtjs" class="anchorjs-link"></a></span></h3>
        <p>如果您需要传递自定义的 <a href="../../../bootstrap-vue/docs/misc/settings#default-bootstrapvue-configuration" class="font-weight-bold">BootstrapVue 配置</a> ，可以通过在 <code translate="translate" class="notranslate text-nowrap">nuxt.config.js</code> 中设置 <code translate="translate" class="notranslate text-nowrap">config</code> 属性来实现：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-built_in">module</span>.exports = {
          <span class="hljs-attr">modules</span>: [<span class="hljs-string">'bootstrap-vue/nuxt'</span>],
          <span class="hljs-attr">bootstrapVue</span>: {
            <span class="hljs-attr">config</span>: {
              <span class="hljs-comment">// Custom config options here</span>
            }
          }
        }</pre>
        <h3 id="using-pretranspiled-version-of-bootstrapvue-for-nuxtjs" class="bv-no-focus-ring"><span class="bd-content-title">对 Nuxt.js 使用 BootstrapVue 的预编译版本<a href="#using-pretranspiled-version-of-bootstrapvue-for-nuxtjs" aria-labelledby="using-pretranspiled-version-of-bootstrapvue-for-nuxtjs" class="anchorjs-link"></a></span></h3>
        <p>Nuxt.js 模块使用 BootstrapVue 的预编译版本来加快开发构建，并使用BootstrapVue的源（ <code translate="translate" class="notranslate text-nowrap">src/</code> ）来获得更高质量和更小批量生产。</p>
        <p>您可以使用 <code translate="translate" class="notranslate text-nowrap">usePretranspiled</code> 选项覆盖此选项。设置为 <code translate="translate" class="notranslate text-nowrap">true</code> 总是使用预编译版本，而将其设置为 <code translate="translate" class="notranslate text-nowrap">false</code> 则始终使用 <code translate="translate" class="notranslate text-nowrap">src/</code> 默认情况下，<code translate="translate" class="notranslate text-nowrap">usePretranspiled</code> 仅在开发模式下启用。默认值是性能最佳的。</p>
        <h2 id="vue-cli-3" class="bv-no-focus-ring"><span class="bd-content-title">Vue CLI 3<a href="#vue-cli-3" aria-labelledby="vue-cli-3" class="anchorjs-link"></a></span></h2>
        <p>与 V2 不同，Vue CLI 3不使用模板。</p>
        <p>在目录 <code translate="translate" class="notranslate text-nowrap">my-project</code> 中创建一个新项目：</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate">npx @vue/cli create my-project</pre>
        <p>输入 <code translate="translate" class="notranslate text-nowrap">my-project</code> 目录并安装 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue</code> ：</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate">npm install bootstrap-vue</pre>
        <p>在后台，Vue CLI 使用 webpack，因此我们可以按照 webpack 的说明注册 BootstrapVue 插件。</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
        <span class="hljs-keyword">import</span> { BootstrapVue, BootstrapVueIcons } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>

        <span class="hljs-keyword">import</span> <span class="hljs-string">'bootstrap/dist/css/bootstrap.css'</span>
        <span class="hljs-keyword">import</span> <span class="hljs-string">'bootstrap-vue/dist/bootstrap-vue.css'</span>

        Vue.use(BootstrapVue)
        Vue.use(BootstrapVueIcons)</pre>
        <p>有关在各种 BootstrapVue 组件上将项目相对路径用于image src 属性的 Vue CLI 3的其他配置，请参阅 <a href="../../../bootstrap-vue/docs/reference/images#vue-cli-3-support" class="font-weight-bold">Image Src Resolving</a> 参考页面的 Vue CLI 3部分。</p>
        <h3 id="vue-cli-3-plugin" class="bv-no-focus-ring"><span class="bd-content-title">Vue CLI 3 插件<a href="#vue-cli-3-plugin" aria-labelledby="vue-cli-3-plugin" class="anchorjs-link"></a></span></h3>
        <p>或者，您可以使用 <a href="https://github.com/GregYankovoy/vue-cli-plugin-bootstrap-vue" target="_blank" rel="noopener">Bootstrap-Vue Vue CLI 3 插件</a> 来帮助您配置应用程序。</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate">vue create my-app
        <span class="hljs-built_in">cd</span> my-app
        vue add bootstrap-vue</pre>
        <p>这将创建一个具有基本 BootstrapVue 设置的新应用，以启动您的项目。</p>
        <p>将来，该插件将提供更多高级配置和模板的选项。</p>
        <p>对于图标支持，您可能需要编辑生成的配置文件。</p>
        <h2 id="browser" class="bv-no-focus-ring"><span class="bd-content-title">浏览器<a href="#browser" aria-labelledby="browser" class="anchorjs-link"></a></span></h2>
        <p>如果未使用模块捆绑程序或编译过程，则可以在 HTML <code translate="translate" class="notranslate text-nowrap">&lt;head&gt;</code> 部分中添加 Bootstrap 和 BootstrapVue CSS URL，然后添加所需的 JavaScript 文件。</p>
        <p>在支持较旧的浏览器时（请参见下面的 <a href="#browser-support" class="font-weight-bold">Browser Support</a>【浏览器支持】），在加载 Vue 和 BootstrapVue JavaScript 文件之前，您需要包括一个 polyfill 以处理现代 JavaScript 功能。</p>
        <pre translate="translate" class="hljs html text-monospace p-2 notranslate"><span class="hljs-comment">&lt;!-- Add this to &lt;head&gt; --&gt;</span>

        <span class="hljs-comment">&lt;!-- Load required Bootstrap and BootstrapVue CSS --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"//unpkg.com/bootstrap/dist/css/bootstrap.min.css"</span> /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"</span> /&gt;</span>

        <span class="hljs-comment">&lt;!-- Load polyfills to support older browsers --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- Load Vue followed by BootstrapVue --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//unpkg.com/vue@latest/dist/vue.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

        <span class="hljs-comment">&lt;!-- Load the following for BootstrapVueIcons support --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
        <h2 id="build-variants" class="bv-no-focus-ring"><span class="bd-content-title">构建变量<a href="#build-variants" aria-labelledby="build-variants" class="anchorjs-link"></a></span></h2>
        <p>为您的构建环境/打包器选择最佳变体有助于减小捆绑包的大小。如果捆绑包支持 esm 模块，它将自动优先于 commonjs 。</p>
        <div class="table-responsive-sm">
        <table class="b-table table table-bordered table-striped bv-docs-table">
        <thead class="thead-default">
        <tr>
        <th>变量</th>
        <th>环境</th>
        <th>握手</th>
        <th>包路径</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td><strong>ESM module</strong></td>
        <td>webpack 2+ / rollup.js</td>
        <td>Yes</td>
        <td><code translate="translate" class="notranslate text-nowrap">esm/index.js</code></td>
        </tr>
        <tr>
        <td>ESM bundle</td>
        <td>webpack 2+ / rollup.js</td>
        <td>Yes</td>
        <td><code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue.esm.js</code></td>
        </tr>
        <tr>
        <td>commonjs2</td>
        <td>webpack 1 / ...</td>
        <td>No</td>
        <td><code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue.common.js</code> <em>or</em> <code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue.common.min.js</code></td>
        </tr>
        <tr>
        <td>UMD</td>
        <td>Browser</td>
        <td>No</td>
        <td><code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue.js</code> <em>or</em> <code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue.min.js</code></td>
        </tr>
        </tbody>
        </table>
        </div>
        <p>请注意，UMD（浏览器）变体不包含BootstrapVue <a href="../../../bootstrap-vue/docs/icons" class="font-weight-bold">icons</a> 图标支持，上面列出的所有其他变体 <em>都包含</em>  <code translate="translate" class="notranslate text-nowrap">BootstrapVueIcons</code>（<code translate="translate" class="notranslate text-nowrap">IconsPlugin</code>）插件（请注意，<a href="../../../bootstrap-vue/docs/icons#usage" class="font-weight-bold">Icons usage</a>【图标插件】 <strong>不会</strong> 自动安装，必须通过 <code translate="translate" class="notranslate text-nowrap">Vue.use()</code> 进行显式安装。图标使用情况部分，以了解更多详细信息。</p>
        <p>仅图标模块：</p>
        <div class="table-responsive-sm">
        <table class="b-table table table-bordered table-striped bv-docs-table">
        <thead class="thead-default">
        <tr>
        <th>变量</th>
        <th>环境</th>
        <th>握手</th>
        <th>包路径</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td><strong>ESM bundle</strong></td>
        <td>webpack 2+ / rollup.js</td>
        <td>Yes</td>
        <td><code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue-icons.esm.js</code></td>
        </tr>
        <tr>
        <td>commonjs2</td>
        <td>webpack 1 / ...</td>
        <td>No</td>
        <td><code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue-icons.common.js</code> <em>or</em> <code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue-icons.common.min.js</code></td>
        </tr>
        <tr>
        <td>UMD</td>
        <td>Browser</td>
        <td>No</td>
        <td><code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue-icons.js</code> <em>or</em> <code translate="translate" class="notranslate text-nowrap">dist/bootstrap-vue-icons.min.js</code></td>
        </tr>
        </tbody>
        </table>
        </div>
        <p><code translate="translate" class="notranslate text-nowrap">ESM</code> 模块的构建和 <code translate="translate" class="notranslate text-nowrap">ESM</code> 捆绑包（单个文件）是 <a href="#tree-shaking-with-module-bundlers" class="font-weight-bold">tree-shakeable</a>【可握手】的，但是 <em>与</em> <code translate="translate" class="notranslate text-nowrap">ESM</code> 捆绑包相比，使用 <code translate="translate" class="notranslate text-nowrap">ESM</code> 模块时，最终捆绑包的尺寸会更小。</p>
        <p>上面列出的所有构建变量均已针对 BootstrapVue 支持的 <a href="https://github.com/bootstrap-vue/bootstrap-vue/blob/master/.browserslistrc" target="_blank" rel="noopener">浏览器</a> 进行了预编译，但是，如果仅针对现代浏览器，则可能要从 <code translate="translate" class="notranslate text-nowrap">src/index.js</code> 导入 <code translate="translate" class="notranslate text-nowrap">BootstrapVue</code>（通过将 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue</code> 别名为 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue/src/index.js</code> ）并将 <code translate="translate" class="notranslate text-nowrap">bootstrap-vue/src</code> 列入白名单以通过您自己的项目进行移植，这有可能减小最终项目包的大小。有关更多详细信息，请参见上面的 <a href="#using-bootstrapvue-source-code-for-smaller-bundles" class="font-weight-bold">将BootstrapVue源代码用于较小的捆绑软件</a> 。</p>
        <h3 id="dependencies" class="bv-no-focus-ring"><span class="bd-content-title">依存关系<a href="#dependencies" aria-labelledby="dependencies" class="anchorjs-link"></a></span></h3>
        <p>BootstrapVue 依赖于 <code translate="translate" class="notranslate text-nowrap">Popper.js</code>（用于 Tooltip ，Popover 和 Dropdown 定位），<code translate="translate" class="notranslate text-nowrap">PortalVue</code>（用于吐司）和 <code translate="translate" class="notranslate text-nowrap">vue-functional-data-merge</code>（由我们的功能组件使用）这三个依赖项都包含在 BootstrapVue <code translate="translate" class="notranslate text-nowrap">UMD</code> 捆绑包中，而 仅 UMD（浏览器）图标包包含 <a href="https://github.com/alexsasharegan/vue-functional-data-merge" target="_blank" rel="noopener"><code translate="translate" class="notranslate text-nowrap">vue-functional-data-merge</code></a> 。</p>
        <h2 id="migrating-a-project-already-using-bootstrap" class="bv-no-focus-ring"><span class="bd-content-title">已使用 Bootstrap 迁移项目<a href="#migrating-a-project-already-using-bootstrap" aria-labelledby="migrating-a-project-already-using-bootstrap" class="anchorjs-link"></a></span></h2>
        <p>如果您已经在使用 Bootstrap v4，则可能需要对项目进行一些调整：</p>
        <ul>
        <li>从页面脚本或构建管道中删除 <code translate="translate" class="notranslate text-nowrap">bootstrap.js</code> 文件  file from your page scripts or build pipeline</li>
        <li>如果 Bootstrap 是唯一依赖 <code translate="translate" class="notranslate text-nowrap">jQuery</code> 的东西，则可以安全地删除它-BootstrapVue <strong>不依赖</strong> <code translate="translate" class="notranslate text-nowrap">jQuery</code></li>
        <li>将您的本机 Bootstrap HTML 标记转换为简化的 BootstrapVue 自定义组件标记 </li>
        <li>首先仅转换需要 Bootstrap javascript 的交互式控件。</li>
        </ul>
        <h2 id="browser-support" class="bv-no-focus-ring"><span class="bd-content-title">浏览器支持<a href="#browser-support" aria-labelledby="browser-support" class="anchorjs-link"></a></span></h2>
        <h3 id="css" class="bv-no-focus-ring"><span class="bd-content-title">CSS<a href="#css" aria-labelledby="css" class="anchorjs-link"></a></span></h3>
        <p>BootstrapVue与Bootstrap v4.4 CSS / SCSS一起使用。 有关Bootstrap v4当前支持的浏览器的更多信息，请参见 <a rel="noopener" target="_blank" href="//getbootstrap.com/docs/4.4/getting-started/browsers-devices" class="">Browsers and devices</a>【浏览器和设备】。</p>
        <h3 id="js" class="bv-no-focus-ring"><span class="bd-content-title">JS<a href="#js" aria-labelledby="js" class="anchorjs-link"></a></span></h3>
        <p>BootstrapVue 用 Vue.js编写！因此，支持哪种浏览器取决于您的项目和捆绑软件。</p>
        <p>BootstrapVue使用以下功能和API：</p>
        <ul>
        <li>ES6 (即 <code translate="translate" class="notranslate text-nowrap">Array.from()</code>, <code translate="translate" class="notranslate text-nowrap">Array.isArray()</code>, <code translate="translate" class="notranslate text-nowrap">Object.assign()</code>, <code translate="translate" class="notranslate text-nowrap">Object.is()</code>, 等)</li>
        <li><code translate="translate" class="notranslate text-nowrap">Promise</code></li>
        <li><code translate="translate" class="notranslate text-nowrap">MutationObserver</code></li>
        <li><code translate="translate" class="notranslate text-nowrap">IntersectionObserver</code> (可选的)</li>
        </ul>
        <p>如果要支持较旧的 IE ，Android 和 iOS 设备 Web 浏览器，则可能要使用 <a href="https://github.com/zloirock/core-js" target="_blank" rel="noopener">core-js</a> 和 <a href="https://www.npmjs.com/package/intersection-observer" target="_blank" rel="noopener">intersection-observer</a>【交集观察器】：</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate">npm install core-js regenerator-runtime intersection-observer</pre>
        <p>然后将 polyfills 导入应用主入口：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-keyword">import</span> <span class="hljs-string">'core-js/stable'</span>
        <span class="hljs-keyword">import</span> <span class="hljs-string">'regenerator-runtime/runtime'</span>
        <span class="hljs-keyword">import</span> <span class="hljs-string">'intersection-observer'</span> <span class="hljs-comment">// Optional</span>
        <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
        <span class="hljs-keyword">import</span> BootstrapVue <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span></pre>
        <p>如果使用已弃用的 <a href="https://babeljs.io/docs/en/babel-polyfill/" target="_blank" rel="noopener">@babel/polyfill</a>：</p>
        <pre translate="translate" class="hljs bash text-monospace p-2 notranslate">npm install @babel/polyfill intersection-observer</pre>
        <p>然后将 polyfills 导入应用主入口：</p>
        <pre translate="translate" class="hljs js text-monospace p-2 notranslate"><span class="hljs-keyword">import</span> <span class="hljs-string">'@babel/polyfill'</span>
        <span class="hljs-keyword">import</span> <span class="hljs-string">'intersection-observer'</span> <span class="hljs-comment">// Optional</span>
        <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
        <span class="hljs-keyword">import</span> BootstrapVue <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span></pre>
        <p>或者，使用 <a href="https://polyfill.io/" target="_blank" rel="noopener">Polyfill.io</a> 通过 HTML <code translate="translate" class="notranslate text-nowrap">&lt;head&gt;</code> 部分中的 <code translate="translate" class="notranslate text-nowrap">&lt;script&gt;</code> 标记动态提供浏览器特定的polyfill。 有关示例，请参见上面的 <a href="#browser" class="font-weight-bold">Browser</a>【浏览器	】部分。</p>
        <h2 id="tooling-support" class="bv-no-focus-ring"><span class="bd-content-title">工具支持<a href="#tooling-support" aria-labelledby="tooling-support" class="anchorjs-link"></a></span></h2>
        <p>BootstrapVue 提供了其他帮助程序文件，可在流行的 IDE 编辑器中自动完成。</p>
        <h3 id="vs-code--vetur" class="bv-no-focus-ring"><span class="bd-content-title">VS Code + Vetur<a href="#vs-code--vetur" aria-labelledby="vs-code--vetur" class="anchorjs-link"></a></span></h3>
        <p>如果您使用 <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VS Code</a> 作为文本编辑器，则BootstrapVue具有Intellisense自动补全功能，可通过 <code translate="translate" class="notranslate text-nowrap">dist/vetur-tags.json</code> 和 <code translate="translate" class="notranslate text-nowrap">dist/vetur-attributes.json</code> 文件使用组件属性和指令。</p>
        <h3 id="jetbrains-webstorm-and-compatible" class="bv-no-focus-ring"><span class="bd-content-title">JetBrains WebStorm (兼容)<a href="#jetbrains-webstorm-and-compatible" aria-labelledby="jetbrains-webstorm-and-compatible" class="anchorjs-link"></a></span></h3>
        <p>对于 <a href="https://www.jetbrains.com/webstorm/" target="_blank" rel="noopener">WebStorm</a> 编辑器（或与Web类型兼容），BootstrapVue提供文件 <code translate="translate" class="notranslate text-nowrap">dist/web-types.json</code> 用于组件属性和指令自动完成。</p>
      
      
    </main>
  </div>
</div>

<script src="../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../v4/dist/js/popper.min.js"></script> 
<script src="../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../v4/assets/js/docs.min.js"></script> 
<script src="../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
	inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>